<template>
  <view class="my-orders">
    <!-- 顶部导航栏（与其他页面样式统一） -->
    <view class="nav-bar">
      <image class="back-icon" src="/static/back.png" @click="goBack"></image>
    </view>

    <!-- 蓝色过渡区域（与其他页面一致） -->
    <view class="c1"></view>

    <!-- 标签栏（进行中、已完成） -->
    <view class="tab-bar">
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 0 }" 
        @click="switchTab(0)"
      >
        进行中
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 1 }" 
        @click="switchTab(1)"
      >
        已完成
      </view>
    </view>

    <!-- 筛选及预约日期栏 -->
    <view class="filter-bar" v-if="currentTab === 0">
      <view class="filter-item">
        <text class="filter-label">维修方式:</text>
        <picker mode="selector" :range="repairModes" @change="onRepairModeChange">
          <view class="picker-view">
            {{ selectedRepairMode }}
            <image class="arrow-icon" src="@/img/车联网服务-08我的-03我的维修_slices/日期.png"></image>
          </view>
        </picker>
      </view>
      <!-- 预约日期及图标靠右显示 -->
      <view class="filter-item" style="margin-left: auto;">
        <image 
          class="calendar-icon" 
          src="@/img/车联网服务-08我的-03我的维修_slices/日期.png" 
          @click="showTimeDialog = !showTimeDialog"
        ></image>
        <text class="date-text">预约日期</text>
      </view>
    </view>

    <!-- 订单列表 -->
    <view class="order-list" v-if="currentTab === 0">
      <view class="order-item" v-for="(item, index) in orderList" :key="index">
        <view class="order-info">
          <text class="order-label">维修单号：</text>
          <text class="order-value">{{ item.orderNo }}</text>
        </view>
        <view class="order-info">
          <text class="order-label">维修方式：</text>
          <text class="order-value">{{ item.repairMode }}</text>
        </view>
        <view class="order-info">
          <text class="order-label">预约日期：</text>
          <text class="order-value">{{ item.appointDate }}</text>
        </view>
      </view>
    </view>

    <!-- 时间选择弹窗 -->
    <view class="time-dialog" v-if="showTimeDialog">
      <view class="dialog-content">
        <view class="time-item">
          <text class="time-label">开始时间</text>
          <text class="time-value">2023年03月02日</text>
          <text class="time-value">17:00</text>
        </view>
        <view class="time-item">
          <text class="time-label">结束时间</text>
          <text class="time-value">2023年03月12日</text>
          <text class="time-value">17:00</text>
        </view>
        <!-- 小圆点样式的确认、取消按钮 -->
        <view class="dialog-btns">
          <button 
            class="btn dialog-btn cancel-btn" 
            @click="showTimeDialog = false"
          >
            取消
          </button>
          <button 
            class="btn dialog-btn confirm-btn" 
            @click="showTimeDialog = false"
          >
            确认
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0, // 0:进行中，1:已完成
      repairModes: ["全部", "到店维修", "上门取车"],
      selectedRepairMode: "全部",
      orderList: [
        { orderNo: "3535252", repairMode: "到店维修", appointDate: "2022/11/10 11:00" },
        { orderNo: "3535252", repairMode: "上门取车", appointDate: "2022/11/10 11:00" },
        { orderNo: "3535252", repairMode: "到店维修", appointDate: "2022/11/10 11:00" }
      ],
      showTimeDialog: false // 控制时间选择弹窗的显示与隐藏
    };
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      });
    },
    switchTab(index) {
      this.currentTab = index;
    },
    onRepairModeChange(e) {
      this.selectedRepairMode = this.repairModes[e.detail.value];
    }
  }
};
</script>

<style scoped>
  /* 蓝色过渡区域（与其他页面完全一致） */
  .c1{
    background-color: #007aff;
    height: 60px;
  }

/* 页面整体样式（与其他页面统一） */
.my-orders {
  background-color: #f5f5f5; /* 统一浅灰背景 */
  min-height: 100vh;
}

/* 导航栏样式（与其他页面完全一致） */
.nav-bar {
  display: flex;
  align-items: center;
  height: 0px; /* 与其他页面导航栏高度一致 */
  background-color: #007aff;
  padding: 0 15px;
}
.back-icon {
  width: 20px;
  height: 20px; /* 与其他页面图标尺寸一致 */
}
.nav-title {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin: 0 auto;
}

/* 标签栏样式（保持原有设计，与导航栏衔接） */
.tab-bar {
  display: flex;
  align-items: center;
  height: 0px;
  background-color: #007aff; /* 导航栏颜色 */
  padding: -20px 0 -100px 0;
  margin-top: -50px;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  color: #fff;
  font-size: 16px;
}
.tab-item.active {
  border-bottom: 2px solid #fff;
}

/* 筛选及预约日期栏样式 */
.filter-bar {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background-color: #fff;
  border-bottom: 1px solid #f5f5f5;
  margin: 0 15px; /* 与订单列表边距统一 */
  border-radius: 8px 8px 0 0; /* 顶部圆角与列表衔接 */
  margin-top: 30px; /* 与标签栏保持间距 */
}
.filter-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
  margin-top: 10px;
}
.filter-label {
  font-size: 14px;
  color: #333;
  margin-right: 5px;
}
.picker-view {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
}
.arrow-icon {
  width: 15px;
  height: 15px;
  margin-left: 5px;
}
.calendar-icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.date-text {
  font-size: 14px;
  color: #333;
}

/* 订单列表样式（与其他列表样式统一） */
.order-list {
  background-color: #fff;
  padding: 15px;
  margin: 0 15px; /* 统一边距 */
  border-radius: 0 0 8px 8px; /* 底部圆角与筛选栏衔接 */
}
.order-item {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
}
.order-info {
  display: flex;
  margin-bottom: 8px;
  align-items: center; /* 垂直居中对齐 */
}
.order-label {
  font-size: 14px;
  color: #666;
  width: 80px;
}
.order-value {
  font-size: 14px;
  color: #333;
  flex: 1; /* 自适应剩余空间 */
}

/* 时间选择弹窗样式 */
.time-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialog-content {
  background-color: #fff;
  width: 80%;
  border-radius: 8px;
  padding: 20px;
}
.time-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.time-label {
  font-size: 14px;
  color: #666;
  width: 80px;
}
.time-value {
  font-size: 14px;
  color: #333;
}

/* 弹窗按钮样式（与其他页面按钮统一） */
.dialog-btns {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 20px;
}
/* 按钮基础样式统一 */
.btn {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
}
.dialog-btn {
  width: 80px;
  height: 36px;
  border-radius: 18px;
  padding: 0;
  font-size: 14px;
  line-height: 36px;
  text-align: center;
  border: none;
}
.cancel-btn {
  background-color: #f5f5f5;
  color: #666;
}
.confirm-btn {
  background-color: #007aff;
  color: #fff;
}
</style>